import { withI18n, Trans } from '@lingui/react'
//import { Form } from 'antd'
import React, { Fragment, PureComponent } from 'react'
import PropTypes from 'prop-types'
import { DescriptionList } from 'ant-design-pro'
import { Page } from 'components'
import {
  Spin,
  Empty,
  Radio,
  Typography,
  DatePicker,
  Button,
  Icon,
  Tooltip,
  Table,
  List,
  Card,
  Tag,
} from 'antd'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'
import 'echarts-gl'
import styles from '../index.less'
import moment from 'moment'
const { MonthPicker, RangePicker, WeekPicker } = DatePicker
const { Paragraph } = Typography
const { Description } = DescriptionList
import { router } from 'utils'

const datetoday = moment().format('YYYY-MM-DD')
const { Meta } = Card

@withI18n()
class Relations extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const { i18n, data, deviceid, Imei, loading, relations } = this.props

    const { Main = {}, Child } = relations

    const { DeviceName } = Main

    const thisdeviceStyle = targetObj => {
      var issame = false
      if (targetObj && targetObj.Imei) {
        issame = targetObj.Imei == Imei
      }
      const borderstyle = { border: 'solid', borderWidth: 2, borderRadius: 5 }
      return issame
        ? {
            ...borderstyle,
            borderColor: 'rgb(24,144,255)',
          }
        : {
            ...borderstyle,
            borderColor: 'rgb(200,200,200)',
          }
    }

    return (
      <Page inner>
        <DescriptionList
          size="large"
          style={{}}
          title={
            <b>
              <Trans>Equipment relationship map</Trans>
            </b>
          }
        >
          <Spin spinning={loading}>
            <div style={{ marginLeft: 15, marginRight: 15 }}>
              <div
                style={{ fontWeight: 'bold', fontSize: 16, marginBottom: 10 }}
              >
                <Trans>Main module</Trans>:
              </div>
              <div
                style={{
                  marginBottom: 10,
                }}
              >
                <Card
                  hoverable
                  onClick={e => {
                    router.push({
                      pathname: '/devices/' + Main.objectId,
                    })
                  }}
                  style={{
                    ...thisdeviceStyle(Main),
                  }}
                >
                  <Meta
                    title={
                      <span>
                        <Trans>Name</Trans>: &nbsp;
                        <Tag color="geekblue">{DeviceName}</Tag>
                      </span>
                    }
                    description={
                      <b>
                        <span>Imei: &nbsp;{Main.Imei}</span>
                      </b>
                    }
                  />
                </Card>
              </div>
              <div style={{ fontWeight: 'bold', fontSize: 16 }}>
                <Trans>Sub module</Trans>:
              </div>
              <List
                dataSource={Child}
                footer={
                  <div>
                    {' '}
                    <b>朗越能源</b>© 版权所有
                  </div>
                }
                style={{ marginBottom: 0, paddingTop: 0, marginTop: 0 }}
                renderItem={item => {
                  const {
                    DeviceName,
                    BelongProject,
                    ReportTotalTime,
                    Note,
                    objectId,
                  } = item
                  const issame = item.Imei == Imei
                  return (
                    <List.Item
                      key={item.Imei}
                      onClick={e => {
                        if (!issame)
                          router.push({
                            pathname: '/devices/' + objectId,
                          })
                      }}
                    >
                      <Card
                        hoverable
                        style={{
                          ...thisdeviceStyle(item),
                          width: '100%',
                        }}
                      >
                        <List.Item.Meta
                          title={<Tag color="blue">{DeviceName}</Tag>}
                          description={
                            <Fragment>
                              <div>
                                <Trans>Number of data reporting</Trans>:&nbsp;
                                {ReportTotalTime}
                              </div>
                              <div>Imei:&nbsp;{item.Imei}</div>
                            </Fragment>
                          }
                        />
                      </Card>
                    </List.Item>
                  )
                }}
              />
            </div>
          </Spin>
        </DescriptionList>
      </Page>
    )
  }
}

// DataForm.propTypes = {
//   onAdd: PropTypes.func,
//   //form: PropTypes.object,
//   filter: PropTypes.object,
//   onFilterChange: PropTypes.func,
// }

export default Relations
